<template>
  <div class="home" :style="{ background: 'url(' + personImg + ') no-repeat' }">
    <div class="back" @click="goPage('home')">返回</div>
    <div class="rule" @click="showRule = true">
      <img src="@/assets/img/signRuleIcon.png" />
    </div>
    <div class="imgBox">
      <img class="r1" src="@/assets/img/sign1.png" /><br />
    </div>
    <div>
      <div class="signDay">
        <span>您已签到{{ allDay }}天</span>
      </div>
      <div class="signBox">
        <div class="signContent">
          <span>
            —— 连续签到7天再送200福鼠 ——
          </span>
          <div class="line1">
            <div class="item">
              <div class="time">1/25</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.one !== 0">
                {{ changeText("one") }}
              </div>
            </div>
            <div class="item">
              <div class="time">1/26</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.two !== 0">
                {{ changeText("two") }}
              </div>
            </div>
            <div class="item">
              <div class="time">1/27</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.three !== 0">
                {{ changeText("three") }}
              </div>
            </div>
          </div>
          <div class="line2">
            <div class="item">
              <div class="time">1/28</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.four !== 0">
                {{ changeText("four") }}
              </div>
            </div>
            <div class="item">
              <div class="time">1/29</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.five !== 0">
                {{ changeText("five") }}
              </div>
            </div>
            <div class="item">
              <div class="time">1/30</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.six !== 0">
                {{ changeText("six") }}
              </div>
            </div>
            <div class="item">
              <div class="time">1/31</div>
              <img src="@/assets/img/sign2.png" alt="" />
              <span class="time">+50</span>
              <div class="mc" v-if="signList.seven !== 0">
                {{ changeText("seven") }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <md-button type="warning" round @click="signIn">立即签到</md-button>
      </div>
    </div>
    <md-landscape v-model="showRule" :mask-closable="true">
      <img src="@/assets/img/signRule.png" />
    </md-landscape>
  </div>
</template>

<script>
import wx from "weixin-jsapi";
import personImg from "@/assets/img/signBg.jpg";
import r3 from "@/assets/img/ranking3.png";
import { Popup, Landscape, Button, Toast, PopupTitleBar } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Popup.name]: Popup,
    [Landscape.name]: Landscape,
    [Button.name]: Button,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      personImg: personImg,
      r3: r3,
      signList: {},
      allDay: 0,
      showRule: false
    };
  },
  methods: {
    changeText(index) {
      if (this.signList[index] === 1) {
        return "已签到";
      } else if (this.signList[index] === 0) {
        return "未签到";
      } else if (this.signList[index] === 2) {
        return "已错过";
      }
    },
    goPage(routeName) {
      this.$router.push({ name: routeName });
    },
    logout() {
      localStorage.removeItem("mtoken");
      sessionStorage.clear();
      this.$router.push({ name: "login" });
    },
    getConfig() {
      wx.ready(() => {
        this.wxShare();
      });
    },
    wxShare() {
      let self = this;
      const share_title = "答题押电影，豪礼领不停！";
      const share_desc =
        "是时候展现你的票房预测能力了，签到再答题，福鼠天天送，瓜分新年豪礼！";
      const share_link = "http://gift.hrycf.com";
      const share_img = "https://test.hrycf.com/hry/gift/cj.png";
      wx.showOptionMenu();
      wx.onMenuShareTimeline({
        title: share_title, // 分享标题
        link: share_link, // 分享链接
        imgUrl: share_img
      });
      wx.onMenuShareAppMessage({
        title: share_title, // 分享标题
        desc: share_desc, // 分享描述
        link: share_link, // 分享链接
        imgUrl: share_img,
        success: function() {
          self.getOneOpportunity();
        }
      });
    },
    signIn() {
      let currentDate = this.getNowFormatDate();
      let timestamp = new Date().getTime();
      if (timestamp < 1579917600000) {
        Toast.failed("签到尚未开始", 3000, true);
        return false;
      }
      if (timestamp > 1580486399000) {
        Toast.failed("签到活动已结束", 3000, true);
        return false;
      }
      if (this.info.is_vip === 2) {
        if (!(currentDate === "2020-01-25" || currentDate === "2020-01-26")) {
          Toast.failed("非VIP用户，最多可签到前两天", 3000, true);
          return false;
        }
      }
      this.$ajax
        .post(this.$api.sign, false, true)
        .then(() => {
          this.$message.success("签到成功！");
          this.getInfo();
        })
        .catch(err => {
          Toast.failed(err, 3000, true);
        });
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getSignInfo, false, true)
        .then(res => {
          this.signList = res.list;
          this.allDay = res.all;
        })
        .catch(err => {
          Toast.failed(err, 3000, true);
        });
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  },
  created() {
    this.getInfo();
  },
  mounted() {
    this.getConfig();
  },
  computed: {
    isValidate() {
      return this.$store.state.isValidate;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
    info() {
      return this.$store.state.info;
    }
  }
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
  position: relative;
  background-size: 100%, 100% !important;
  .back {
    position: fixed;
    padding: 20px 50px;
    top: 20px;
    left: 30px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    z-index: 12;
  }
  .rule {
    position: fixed;
    top: 0;
    right: 13px;
    font-weight: bold;
    z-index: 12;
    width: 100px;
    img {
      width: 100%;
    }
  }
  .imgBox {
    font-size: 0;
    text-align: center;
    position: relative;
    z-index: 10;
    .r1 {
      width: 100%;
      @media (max-width: 320px) {
        width: 80%;
      }
    }
  }
  .signDay {
    z-index: 5;
    position: relative;
    width: 350px;
    padding: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 18px 0px rgba(254, 206, 209, 0.5);
    border-radius: 20px;
    margin: -24px auto 0 auto;
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(190, 12, 24, 1);
    line-height: 30px;
  }
  .btn {
    background: #ffffff;
    width: 590px;
    margin: 0 auto;
    padding: 52px 72px 41px;
    border-radius: 0 0 24px 24px;
    @media (max-width: 320px) {
      padding: 30px 72px 30px;
    }
  }
  .signBox {
    background: #ffffff;
    width: 590px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 24px 24px 0 0;
    .signContent {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 30px;
      text-align: center;
      border-radius: 24px;
      padding: 36px 25px;
      background: linear-gradient(
        0deg,
        rgba(225, 82, 4, 1) 40%,
        rgba(196, 7, 5, 1) 100%
      );
      .line1 {
        .flex_content();
        .flex_justify_center();
        padding: 29px 0 34px 0;

        .item {
          width: 148px;
          height: 196px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 3px 32px 0px rgba(192, 26, 36, 0.46) inset;
          border-radius: 14px;
          margin-right: 6px;
          padding: 21px 24px;
          position: relative;
          img {
            width: 74px;
            padding: 10px 0;
          }
          .mc {
            position: absolute;
            line-height: 196px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.5);
          }
        }
      }
      .time {
        font-size: 23px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(192, 25, 36, 1);
      }
      .line2 {
        .flex_content();
        .flex_justify_center();
        padding: 0px 0 34px 0;
        .item {
          width: 122px;
          height: 180px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 3px 32px 0px rgba(192, 26, 36, 0.46) inset;
          border-radius: 14px;
          margin-right: 6px;
          padding: 21px 15px;
          position: relative;
          img {
            width: 62px;
            padding: 10px 0;
          }
          .mc {
            position: absolute;
            line-height: 180px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }
}
</style>
